<template>
    <!-- 时间查询 -->
    <el-card>

        <el-form :model="condition" label-width="100px" :inline="true" size="normal">
            <el-form-item>
                <el-radio-group v-model="condition.flag">
                    <el-radio-button>最近7天</el-radio-button>
                    <el-radio-button>最近15天</el-radio-button>
                    <el-radio-button>最近30天</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-date-picker v-model="condition.dataValue" type="daterange" range-separator="-"
                    start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item style="float:right">
                <el-button type="default">查询</el-button>

            </el-form-item>
        </el-form>

    </el-card>
    <!-- 关键指标 -->

    <el-card>
        <p>
            <span class="title">关键指标</span><span>预订维度</span>
            <el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                <el-icon>
                    <QuestionFilled />
                </el-icon>
            </el-tooltip>
        </p>
        <el-divider />
        <table>
            <tr>
                <td>销售额<el-icon>
                        <Warning />
                    </el-icon></td>
                <td>订单量<el-icon>
                        <Warning />
                    </el-icon></td>
                <td>浏览量<el-icon>
                        <Warning />
                    </el-icon></td>
                <td>访客量<el-icon>
                        <Warning />
                    </el-icon></td>
            </tr>
            <tr>
                <td>￥{{ keyIndexs.saleAmount.toFixed(2) }}</td>
                <td>{{ keyIndexs.orderCount }}</td>
                <td>{{ keyIndexs.pageView }}</td>
                <td>{{ keyIndexs.userSessions }}</td>
            </tr>
        </table>
    </el-card>
    <!-- 经营概况 -->
    <el-card>
        <p>
            <span class="title">经营概况（{{ startDate }} ~ {{ endDate }}）</span>
            <el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                <el-icon>
                    <QuestionFilled />
                </el-icon>
            </el-tooltip>
        </p>
        <el-divider />
        <table>
            <tr>
                <td>销售额<el-tooltip style="width:100px;" effect="dark"
                        content="统计时间内，订单的销售额（到店订单是订单金额减去会员折扣；预付订单是实付金额与余额相加，不含在线支付押金），用户下单即统计 （全部订单状态，含商户拒绝确认订单，商户操作取消入住订单，用户申请取消入住的订单）"
                        placement="right-start">
                        <el-icon>
                            <Warning />
                        </el-icon>
                    </el-tooltip></td>
                <td>实收款<el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                        <el-icon>
                            <Warning />
                        </el-icon>
                    </el-tooltip></td>
                <td>余额支付<el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                        <el-icon>
                            <Warning />
                        </el-icon>
                    </el-tooltip></td>

                <td>转化率<el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                        <el-icon>
                            <Warning />
                        </el-icon>
                    </el-tooltip></td>
                <td>平均售价<el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                        <el-icon>
                            <Warning />
                        </el-icon>
                    </el-tooltip></td>
            </tr>
            <tr>
                <td>￥{{ summaryofOperations.saleAmount.toFixed(2) }}</td>
                <td>￥{{ summaryofOperations.fundsReceived.toFixed(2) }}</td>
                <td>￥{{ summaryofOperations.balancePayment.toFixed(2) }}</td>
                <td>￥{{ summaryofOperations.conversionRate.toFixed(2) }}</td>
                <td>￥{{ summaryofOperations.averagePrice.toFixed(2) }}</td>
            </tr>
        </table>
    </el-card>

    <!-- 销售额趋势 -->
    <el-card>
        <p>
            <span class="title">销售额趋势（{{ startDate }} ~ {{ endDate }}）</span>
            <el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                <el-icon>
                    <QuestionFilled />
                </el-icon>
            </el-tooltip>
        </p>
        <el-divider />
        <trend />

    </el-card>
    <!-- 客房销售额排名 -->
    <el-card>
        <p>
            <span class="title">客房销售额排名（{{ startDate }} ~ {{ endDate }}）</span>
            <el-tooltip style="width:100px;" effect="dark" content="" placement="right-start">
                <el-icon>
                    <QuestionFilled />
                </el-icon>
            </el-tooltip>
        </p>
        <el-divider />

        <el-table :data="roomSalesRank" stripe>
            <el-table-column label="序号" prop="" align='center'>
            </el-table-column>
            <el-table-column label="房价计划名称" prop="" align='center'>
            </el-table-column>
            <el-table-column label="销售额" prop="" align='center'>
            </el-table-column>
            <el-table-column label="	
销售额占比" prop="" align='center'>
            </el-table-column>
        </el-table>

    </el-card>

</template>


<script setup lang="ts">
import { Warning, QuestionFilled } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import trend from "@/views/RBAC/components/SalesTrend.vue"



const condition = reactive({
    flag: 0,
    dataValue: [],

})
//开始时间
const startDate = new Date('2024-04-05').toLocaleDateString();
//结束时间
const endDate = new Date('2024-04-12').toLocaleDateString();
// 客房销售额排名
const roomSalesRank = ref([])
//关键指标
const keyIndexs = reactive({
    saleAmount: 0,
    orderCount: 0,
    pageView: 0,
    userSessions: 0,
})
//经营概况
const summaryofOperations = reactive({
    saleAmount: 0,
    fundsReceived: 0,
    balancePayment: 0,
    conversionRate: 0,
    averagePrice: 0,
})



</script>

<style scoped>
.title {
    font-weight: 600;
    margin-right: 10px;
}

table {
    width: 100%
}
</style>